<template>
  <div class="main">
    <div class="Box">
      <div class="back" @click="back()">《</div>
      <div class="contant">
        <div class="Title">
          订单及兑换流程
          <div class="Stitle">Order and exchange process</div>
        </div>
        <div class="orderBox">
          <div class="orderGoods">
            <div class="goodTitle">
              商品
            </div>
            <div class="goodData">
              <img class="goodImge" :src="commodityData.mainimg[0] | imgF" />
              <div class="goodtxt">
                <div class="goodname">{{ commodityData.title }}</div>
                <div class="goodDetail">
                  {{ commodityData.details }}
                </div>
              </div>
            </div>
          </div>

          <div class="orderNum">
            <div class="orderNumTitle">
              单价
            </div>
            <div class="orderNumData">{{ commodityData.integral }}积分</div>
          </div>
          <div class="orderNum">
            <div class="orderNumTitle">
              数量
            </div>
            <div class="orderNumData">
              x 1
            </div>
          </div>
          <div class="orderNum">
            <div class="orderNumTitle">
              合计
            </div>
            <div class="orderNumDatas">{{ commodityData.integral }}积分</div>
          </div>
        </div>
        <div class="BottomBtn">
          <div class="txt">
            *确认该礼品一经兑换，不予退回
            <el-button
              class="BottomB"
              @click="enterExchange('/ExchangeProcess')"
              >确认兑换</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_commodity } from "../../api/commodity";
import { commodity_img_prefix } from "../../utils/global";

export default {
  name: "Exchange",
  data() {
    return {
      activeName: "second",
      radio1: 0,
      radio2: 0,
      commodityData: {}
    };
  },
  components: {},
  created() {
    console.log(this.$route.query);
    this.getGoods(this.$route.query);
  },
  filters: {
    imgF(val) {
      return commodity_img_prefix + val;
    }
  },
  methods: {
    async getGoods(reqdata) {
      let query = {
        query: {
          ...reqdata
        }
      };
      var commodityData = await get_commodity(query);
      console.log(commodityData.data);
      this.commodityData = commodityData.data[0];
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    SelectGoods(e) {
      console.log(e);
    },
    navigationSelect(path) {
      this.$router.push(path);
    },
    enterExchange() {
      this.$router.push({
        path: "/ExchangeProcess", //跳转路径
        name: "ExchangeProcess", //跳转路径的name值，不写跳转后页面取不到参数
        // 参数
        query: {
          _id: this.commodityData._id
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  height: 800px;
  min-width: 1200px;
  background-color: #ffffff;
  .Box {
    width: 80%;
    min-width: 1000px;
    margin: 0px auto;
    padding: 30px 0 0 0;
    display: flex;
    flex-direction: column;
    .back {
      margin: 10px 0;
      cursor: pointer;
    }
    .Title {
      font-size: 28px;
      border-bottom: solid 1px #bbbbbb;
      height: 80px;
      font-weight: 550;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .Stitle {
        font-size: 14px;
        font-weight: 100;
        margin: 5px 0;
      }
    }
    .orderBox {
      height: 300px;
      width: 1130px;
      display: flex;
      align-items: center;
      border-bottom: solid 1px #bbbbbb;

      .orderGoods {
        height: 240px;
        width: 400px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goodTitle {
          height: 40px;
          display: flex;
          align-items: center;
        }
        .goodData {
          display: flex;
          justify-content: space-between;
          .goodImge {
            height: 180px;
            width: 180px;
            border: solid 1px rgb(187, 185, 184);
            background-color: #bbbbbb;
          }
          .goodtxt {
            width: 180px;
            height: 180px;
            .goodname {
              font-size: 15px;
              width: 140px;
              height: 40px;
              line-height: 20px;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
            .goodDetail {
              height: 64px;
              color: #bbbbbb;
              margin: 30px 0 0 0;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
              -webkit-box-orient: vertical;
            }
          }
        }
      }

      .orderNum {
        height: 240px;
        width: 200px;
        margin: 0 0 0 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .orderNumTitle {
          height: 40px;
          display: flex;
          align-items: center;
        }
        .orderNumData {
          height: 240px;
          display: flex;
          align-items: center;
          color: #bbbbbb;
        }
        .orderNumDatas {
          height: 240px;
          display: flex;
          align-items: center;
          color: rgb(220, 48, 48);
        }
      }
    }
    .BottomBtn {
      width: 80%;
      height: 280px;
      align-items: center;
      float: right;
      display: flex;
      justify-content: flex-end;
      .txt {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 100px;
        color: saddlebrown;
        align-items: center;
        font-size: 14px;
        .BottomB {
          background-color: #1d2f70;
          color: #ffffff;
          width: 240px;
          height: 50px;
        }
      }
    }
  }
}
</style>
